<template>
	<view class="release-classify">
		<!-- #ifndef H5 -->
			<view class="">
				请前往H5平台发布
			</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		
		<view class="witer-text">
			<view class="title">
				<view class="label">
					文章标题:
				</view>
				<input class="uni-input-wrapper"  type="text" v-model="title" placeholder="请输入标题" />
			</view>
			<view class="title">
				<view class="label">
					所属分类:
				</view>
				<uni-combox :candidates="candidates" placeholder="请选择所属分类" v-model="city"></uni-combox>
				<view class="label">
					图片模式:
				</view>
				<uni-combox :candidates="imageslsit" placeholder="请选择图片模式" v-model="images"></uni-combox>
			</view>
			<view class="title">
			</view>
			<view class="title">
				<view class="label">
					编译格式:
				</view>
				<uni-combox :candidates="bianyis" placeholder="请选择编译格式" v-model="bianyi"></uni-combox>
				<view class="label">
					发布日期:
				</view>
				<uni-datetime-picker v-model="single" />
			</view>
			<view class="title">
				<view class="label">
					是否为题:
				</view>
				<uni-combox :candidates="typesssList" placeholder="请选择是否为题" v-model="typesss"></uni-combox>
			</view>
			<view class="title">
				<view class="label textLabel">
					文章内容:
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<lRichTextEditor  :types="bianyi" v-model="content" @change="GetChange">
				</lRichTextEditor>
				<!-- #endif -->
			</view>

			<view class="title">
			</view>
			<button class="submit" type="primary" @click="onSubmit">发 布</button>


		</view>
		
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view class="show-text">
				<!-- #ifndef MP-WEIXIN -->
			<mp-html  container-style="padding:15px 0" markdown :content="content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo"
			 lazy-load scroll-table selectable use-anchor show-with-animation></mp-html>
				
				<!-- #endif -->
		</view>

		<!-- #endif -->


	</view>
</template>

<script>
	import marked from 'marked'
	import uPase from '@/components/gaoyia-parse/parse.vue'
	import {
		mapState
	} from "vuex"
	import uniCombox from "../../uni_modules/uni-combox/components/uni-combox/uni-combox.vue"
	import uniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	// #ifndef MP-WEIXIN
	import lRichTextEditor from '../lRichTextEditor/lRichTextEditor.vue'
	
	// #endif
	export default {
		data() {
			return {
				title:'',
				WatchValue:'',
				content: '',
				single: '',
				bianyi:'markdown',
				bianyis:[
					'普通编译',
					'markdown'
				],
				imageslsit:[
					'none',
					'base',
					'image',
					'column',
				],
				typesss:'是',
				typesssList:[
					'是',
					'否',
				],
				images:'',
				candidates: [
					'JavaScript',
					'HTML-CSS',
					'VUE',
					'React',
					'Angular',
					'项目优化',
					'Linux',
					'跨端开发',
					'JAVA',
					'mySQL',
					'其他',
				],
				city: '',
				cover:[]
			};
		},
		watch:{
		},
		components: {
			uniCombox,
			uniDatetimePicker,
			uPase,
			// #ifndef MP-WEIXIN
			lRichTextEditor,
			
			// #endif
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			GetChange(e) {
				this.content = e
				console.log(e)
			},
			onSubmit(){
				console.log(  this.userinfo,'ddddddddddddddddddd');
				if(!this.userinfo ||!this.city||!this.bianyi ||!this.content ||!this.title ||!this.single ||!this.images){
					return uni.showToast({
						title:"有空未填",
						icon:'none'
					})
				}
				this.add_article()
			},
			async add_article(imagePath){
				let article = await this.$api.add_article({
					user: this.userinfo,
					"classify": this.city,
					"compiler": this.bianyi,
					"content": this.content,
					"cover": this.cover,
					"title": this.title,
					"mode": this.images,
					"create_time": this.single,
					"typesss":this.typesss
				})
				if (!article) {
					uni.showToast({
						title:'发布失败',
						icon:'none'
					})
					uni.showToast({
						title:"请减少文字试一下",
						icon:'none'
					})
				}else{
					uni.showToast({
						title:'发布成功'
					})
				}
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.release-classify {
		display: flex;
			height: 100%;
.uni-input-wrapper{
	width: 1100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #fff;
	height: 42px;
}
.submit{
	width: 100px;
	background-color: $my-bg-color;
}
		.witer-text {
			// #ifdef H5
			width: 50%;

			padding-right: 10px;
			// #endif
			.title {
				margin-top: 15px;
				display: flex;
				align-items: center;
				
				.label {
					color: #555;
					font-weight: bold;
					font-size: 14px;
					margin-right: 10px;
					flex-shrink: 0;
					margin-left: 20px;
				}
				.textLabel{
					align-self: flex-start;
				}
			}

		}

		.show-text {
			flex: 1;
			overflow-x: auto;
			padding-left: 10px;
			border-left: 1px solid #333;
			height: 100%;
		}
	}
</style>
